<template>
    <div>
        <!-- 网页分成了24等分 -->
        <!-- <el-row :gutter="10">
            <el-col :span="1" >
                <div style="width: 100%; height: 300px; background-color: red;"></div>
            </el-col>
            <el-col :span="23">
                <div style="width: 100%; height: 300px; background-color: blue;"></div>
            </el-col>
        </el-row> -->

        <el-button >默认的按钮</el-button>
        <el-button type="primary">主要的按钮</el-button>
        <el-button type="danger">危险的按钮</el-button>
        <el-button type="warning">警告的按钮</el-button>
        <el-button type="info">信息的按钮</el-button>
        <el-button type="success">成功的按钮</el-button>
        <el-button type="success" plain>朴素成功的按钮</el-button>
        <el-button type="success" round>成功的圆角按钮</el-button>
        <el-button type="success" circle>成功的圆形按钮</el-button>
        <el-button type="success" circle icon="el-icon-edit"></el-button>

        <el-row style="margin-top: 20px;">
            <el-col>
                <!-- 默认输入框占整行，所以样式要设置宽度 -->
                <!-- 输入框强制要求有v-model属性，否则输入不了 -->
                <el-input style="width: 200px;" v-model="value" placeholder="请输入内容"></el-input>
                <!-- 文本域形式 -->
                <el-input type="textarea" style="width: 200px;" v-model="value"></el-input>
                <!-- 密码框形式 -->
                <el-input show-password style="width: 200px;" v-model="value"></el-input>
                <!-- 如果感觉输入框太单调了，还可以加点东西，在前面加个搜索图标 -->
                <el-input prefix-icon="el-icon-search" style="width: 200px;" v-model="value" placeholder="请输入内容"></el-input>
                <!-- 也可以在后面放个搜索图标 -->
                <el-input suffix-icon="el-icon-search" style="width: 200px;" v-model="value" placeholder="请输入内容"></el-input>
                <!-- 使用clearable属性，会多出一个一键清除输入框内容的小图标 -->
                <el-input clearable prefix-icon="el-icon-search" style="width: 200px;" v-model="value" placeholder="使用clearable"></el-input>
            </el-col>
        </el-row>

        <el-row style="margin-top: 20px;">
            <el-autocomplete style="width: 300px" placeholder="请输入内容，我来帮你猜一猜" :fetch-suggestions="querySearch" 
            :trigger-on-focus="false" v-model="value3"></el-autocomplete>
        </el-row>

        <el-row>
            <el-select v-model="select" @change="changeSelect">
                <el-option value="桔子"></el-option>
                <el-option value="菠萝"></el-option>
                <el-option value="香蕉"></el-option>
            </el-select>

            <!-- 加上multiple后就变成多选了，同时绑定的属性自动变成数组 -->
            <el-select v-model="select2" @change="changeSelect2" multiple>
                <!-- v-for的形式去渲染 -->
                <el-option v-for="(item) in fruits" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>

            <!-- 加上filterable就是允许搜索 根据输入内容匹配下拉框选项 -->
            <el-select v-model="select3" filterable>
                <!-- v-for的形式去渲染 目标对象Key必须是label -->
                <el-option v-for="(item) in fruits1" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>

        </el-row>

        <el-row>
            <!-- 单选框 -->
            <el-radio-group v-model="radio" @change="selectRadio">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
            </el-radio-group>

            <!-- 多选框 -->
            <el-checkbox-group v-model="checkList" @change="selectCheckBox">
                <el-checkbox label="复选框 A"></el-checkbox>
                <el-checkbox label="复选框 B"></el-checkbox>
            </el-checkbox-group>

            <!-- 日期选择 一般要设置value-format-->
            <el-date-picker v-model="date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="changeDate"></el-date-picker>
            <!-- 日期时间选择 一般要设置value-format-->
            <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDateTime"></el-date-picker>
            <!-- 日期范围 一般要设置value-format-->
            <el-date-picker v-model="daterange" type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期" @change="changeDateRange" value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-row>

        <el-row style="margin-top: 20px;">
            <!-- 表格 border设置边框 -->
            <el-table :data="tableData" border :header-cell-style="{background:'aliceblue',fontSize:'16px'}">
                <!-- prop是指定key，从key中取值 某列设置居中就align="center"-->
                <el-table-column label="序号" prop="id" align="center"></el-table-column>
                <el-table-column label="名称" prop="name" align="center"></el-table-column>
                <el-table-column label="年龄" prop="age" align="center"></el-table-column>
                <el-table-column label="地址" prop="address" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template v-slot="scope">
                        <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </div>
</template>
<script>
export default{
    name:'Element',
    data(){
        // 之所以要return，是因为要把Data里面的属性给到vue实例使用
        return{
            tableData:[
            {  name: '灰灰', address: '安徽省合肥市', id: 1, age: '30' },
            {  name: '灰灰', address: '安徽省合肥市', id: 1, age: '30' },
            {  name: '灰灰', address: '安徽省合肥市', id: 1, age: '30' },
            {  name: '灰灰', address: '安徽省合肥市', id: 1, age: '30' },
            {  name: '灰灰', address: '安徽省合肥市', id: 1, age: '30' },
            {  name: '灰灰', address: '安徽省合肥市', id: 1, age: '30' },
            {  name: '灰灰', address: '安徽省合肥市', id: 1, age: '30' },
            ],
            value:'',
            value2:'',
            value3:'',
            select:'',
            select2:'',
            select3:'',
            radio:'',
            checkList:[],
            date:'',
            datetime:'',
            daterange:'',
            // 结构中必须是value:这种，否则没效果
            coffees: [{ value: '1星巴克咖啡' },{ value: '1栖巢咖啡' }, {value: '2瑞幸咖啡'}, {value: '3库迪咖啡'}],
            fruits:[
                {name:'苹果',id:1},
                {name:'桔子',id:2},
                {name:'香蕉',id:3},
                {name:'菠萝',id:4}
            ],
            fruits1:[
                {label:'苹果',id:1},
                {label:'桔子',id:2},
                {label:'香蕉',id:3},
                {label:'菠萝',id:4}
            ]
        }
    },
    methods:{
        querySearch(query, cb) {  // callback
            // 如果输入了值 就从coffees中，筛选出与用户输入值匹配的结果并数组返回
            let result =  query ? this.coffees.filter(v => v.value.includes(query)) : this.coffees
            console.log(result)
            cb(result);
        },
        changeSelect(){
            console.log(this.select)
        },
        changeSelect2(){
            console.log(this.select2)
        },
        selectRadio(){
            alert(this.radio)
        },
        selectCheckBox(){
            console.log(this.checkList)
        },
        changeDate(){
            console.log(this.date)
        },
        changeDateTime(){
            console.log(this.datetime)
        },
        changeDateRange(){
            console.log(this.daterange)
        },
        edit(row){
            // elementUi自带弹窗
            // 成功弹窗
            // this.$message.success(row.name)
            // 警告弹窗
            // this.$message.warning(row.name)
            // 从屏幕右侧划出来的弹窗
            this.$notify.success(row.name)
            // 确认取消弹窗
            // this.$confirm('这是什么玩意','提示',{
            //     type:'warning'
            // }).then(res=>{
            //     this.$message.success("ok我点击了确认")
            // }).catch(()=>{
            //     this.$message.warning("ok我点击了取消")
            // })
        }
    }
}
</script>